import React from 'react';
import './app.css';
import { Form, Input, Button, message } from 'antd';
import { Icon } from '@ant-design/compatible';
import { withRouter } from 'react-router-dom';
import 'whatwg-fetch';

const FormItem = Form.Item;
const email = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
class Login extends React.Component {
  constructor(props) {
    super(props);
    // 定义数据的初始状态
    this.state = {
      id: ''
    }
  }
  //登录事件
  handleSubmit = (e) => {
    e.preventDefault();
    let url = "http://aishu.ncqsjg.cn/api/v1/auth/login";
    // let formData = new FormData();
    // formData.append('username', this.props.form.getFieldValue("username"));
    // formData.append('userpwd', this.props.form.getFieldValue("userpwd"));

    const { form, history } = this.props;
    form.validateFields(async (err, values) => {
      if (!err) {
        const data = {
          loginName: values.username,
          password: values.userpwd
        }
        history.push('/Order');
        fetch(url, {
          method: 'post',
          mode: 'cors',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        }).then((response) => {
          return response.json()
        }).then((body) => {
          this.setState({
            id: body
          });
          localStorage.setItem('loginName', values.username);
        });
      }
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('username', {
            rules: [
              { required: true, message: 'xxxx' },
              // { pattern: email, message: '请输入正确邮箱' }
            ]
          })(
            <Input
              prefix={< Icon type="user" style={{ fontSize: 13 }} />}
              placeholder="请输入邮箱" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('userpwd', {})(
            <Input
              prefix={< Icon type="lock" style={{ fontSize: 13 }} />}
              type="password"
              placeholder="密码" />
          )}
        </FormItem>
        <FormItem>
          <Button type="primary" htmlType="submit" className="login-form-button">
            登录
                    </Button>
        </FormItem>
      </Form>
    );
  }
}
const WrappedNormalLoginForm = Form.create()(Login);
export default withRouter(WrappedNormalLoginForm);